<template>
  <div class="login">
    <div class="login-card">
      <el-card>
        <el-form
          :model="loginForm"
          status-icon
          ref="loginForm"
          class="login-form"
          label-position="right"
        >
          <el-form-item label="邮箱" prop="username">
            <el-input
              type="username"
              v-model="loginForm.username"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="loginForm.password"></el-input>
          </el-form-item>
          <el-form-item prop="code">
            <el-col :span="10">
              <el-input
                type="text"
                v-model="loginForm.code"
                placeholder="请输入验证码"
                @keydown.enter.native="submitLogin"
              ></el-input>
            </el-col>
            <el-col :span="12">
              <img :src="img" alt="验证码" @click="init"
            /></el-col>
          </el-form-item>
          <el-form-item>
            <div class="submit">
              <el-button type="primary" @click="submit">提交</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import { login } from "../api";
import { getVeriCode } from "../api";

export default {
  data() {
    return {
      loginForm: {
        username: "test2022",
        password: "test2022",
        uuid: "",
      },
      img: "",
    };
  },
  methods: {
    init() {
      getVeriCode().then((res) => {
        this.img = res.data.img;
        this.loginForm.uuid = res.data.uuid;
      });
    },
    submit() {
      login(this.loginForm).then((res) => {
        if (res.flag) {
          this.$message.success("登录成功");
          this.$store.commit("SET_LOGIN_USER", res.data);
          this.$router.push("/");
        } else {
          this.$message.error(res.message);
        
        }
      });
    },
    logout() {
      this.postKeyValueRequest("/api/logout").then((res) => {
        if (res.flag) {
          this.$message.success("注销成功");
          localStorage.removeItem("userinfo");
          this.$store.commit("handleUserInfo", null);
        } else {
          this.$message.error();
          ("登录失败");
        }
      });
    },
    register() {
      this.$router.push("/register");
    },
  },
  computed: {
    userInfo() {
      return this.$store.state.userinfo
        ? this.$store.state.userinfo.avatar
        : null;
    },
  },
  created() {
    this.init();
  },
};
</script>

<style lang="less" scoped>
.login {
}

@media screen and (max-width: 768px) {
  .login-card {
    .el-card {
      width: 90vw !important;
      height: 65vh !important;
    }
  }
}

.login-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  .el-card {
    width: 600px;
    height: 500px;
    border-radius: 18px;
    h1 {
      position: absolute;
      top: 0;
      right: 50%;
      transform: translateX(50%);
    }
  }
}
.login-form {
  margin-top: 28px;
}
.button-container {
  width: 100%;
}
.submit .el-button {
  width: 100% !important;
}
</style>